<template>
	<view class="page">
		<view class="top flex_r" :style="`padding-top:`+$store.state.StatusBar.statusBar + `px`">
			<view class="top-icon" @click="back">
				<!-- <image class="img"
					src=""
					mode="aspectFill"></image> -->
				 <u-icon name='arrow-left' size="42rpx" color="#fff"></u-icon>			
			</view>
			<view class="top-title c-primary" >旅游搭子</view>
			<view class="top-right c-primary" @click="submit">发布</view>
		</view>
		<view :style="`height:`+tophigh+ `px`"></view>
		<view class="" style="display: flex;justify-content: space-between; height: 55rpx;margin-top: 20rpx;">
			<text class="" style="margin-left: 20rpx; color: white;">擅长特长</text>
			<input v-model="form.genius" style="margin-right: 20rpx;text-align: right;color: white;" type="text"
				placeholder="请输入擅长特长">
		</view>
		<view class="line"></view>
		<view class="" style="display: flex;justify-content: space-between; height: 55rpx;margin-top: 20rpx;">
			<text class="" style="margin-left: 20rpx; color: white;">旅游签名</text>
			<input v-model="form.sing" style="margin-right: 20rpx;text-align: right; color: white;" type="text" placeholder="请输入旅游签名">
		</view>
		<view class="line"></view>
		<view class="" style="display: flex;justify-content: space-between; height: 55rpx;margin-top: 20rpx;">
			<text class="" style="margin-left: 20rpx;color: white;">价格</text>
			<input inputmode='decimal' v-model="form.price" style="margin-right: 20rpx;text-align: right;color: white;" type="text"
				placeholder="请输入价格">
		</view>
		<view class="line"></view>
		<view class="" style="display: flex;justify-content: space-between; height: 55rpx;margin-top: 20rpx;">
			<text class="" style="margin-left: 20rpx;color: white;">擅长景点</text>
			<input v-model="form.area" style="margin-right: 20rpx;text-align: right; color: white;" type="text" placeholder="请输入擅长景点">
		</view>
		<view class="line"></view>
		<view class="" style="display: flex;justify-content: space-between; height: 55rpx;margin-top: 20rpx;">
			<text class="" style="margin-left: 20rpx;color: white;">可选位置</text>
			<input v-model="form.tag" style="margin-right: 20rpx;text-align: right;color: white;" type="text" placeholder="请输入可选位置">
		</view>
		<view class="line"></view>
		<view style="height: 20rpx;"></view>
		<text class="text_30" style="color: black; margin-left: 20rpx; color: white;">打开景点</text>
		<view style="text-align: left; margin-top:30rpx;">
			<view v-for="(item,index) in image" style="display: inline-block; margin-left:50rpx; position: relative;">
				<image :src="item" mode="aspectFill" style="width:150rpx; height:150rpx; border-radius: 30rpx; " />
				<image @click="delImg(index)" src="./img/n_near_circle_close.png"
					style="width:20rpx; height:20rpx; position: absolute; top:0rpx;"></image>
			</view>
			<image @tap="chooseImg" src="./img/rc_ext_tab_add.png"
				style="width:100rpx; height:100rpx; border-radius: 30rpx; border:1px solid #666; padding:20rpx; margin-left:50rpx;"
				mode="aspectFill"></image>
		</view>
	</view>
</template>

<script>
	import {
		to
	} from '@/utils/index.js';
	import {
		ossUpload
	} from '@/js_sdk/jason-alioss-upload/oss.js'

	export default {
		data() {
			return {
				$c: this.$c,
				pageno: 1,
				list: [],
				tophigh: 0,
				techang: '',
				image: [],
				form: {
					genius: '',
					sing: '',
					price: '',
					area: '',
					tag: '',
					trippic: '',
					userId: 0
				},

			}
		},
		onLoad(option) {
			this.tophigh = this.$store.state.StatusBar.statusBar + 31;
			this.getUserInfo();
		},
		methods: {
			to,
			back() {
				to()
			},
			async getUserInfo() {
				// 是会员  或者 已经购买门票
				let res = await this.$c.post('/app/usermessage/getMessage')

				let userInfo = res.data
				// console.log(JSON.stringify(userInfo) + '******666******');
				this.form.userId = userInfo.id;

				// console.log(this.form.userId+'****5555**');


			},

			async submit() {
				if(this.form.genius === '' || this.form.genius.trim().length===0){
					uni.showToast({
					  title: '请输入擅长特长',
					  duration: 1000,
					  icon: 'none'
					});
					return ;
				}
				if(this.form.sing === '' || this.form.sing.trim().length===0){
					uni.showToast({
					  title: '请输入旅游签名',
					  duration: 1000,
					  icon: 'none'
					});
					return ;
				}
				if(this.form.price === '' || this.form.price.trim().length===0){
					uni.showToast({
					  title: '请输入价格',
					  duration: 1000,
					  icon: 'none'
					});
					return ;
				}
				if(this.form.area === '' || this.form.area.trim().length===0){
					uni.showToast({
					  title: '请输入擅长景点',
					  duration: 1000,
					  icon: 'none'
					});
					return ;
				}				
				this.form.trippic = this.image.join(',');
				console.log(this.form);
				
				let res = await this.$c.post('/app/newTrip/save', this.form, {
					'content-type': 'application/x-www-form-urlencoded'
				});
				console.log(res);
				if (res.code != 0) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
					return;
				}
				uni.showToast({
					title: "提交成功",
					icon: "none"
				})

				setTimeout(() => {
					// this.getInfo()
					// this.$router.go(0)
					this.to()
				}, 1000)


			},
			chooseImg() {
				uni.chooseImage({
					count: 6,
					success: async (file) => {

						for (let i in file.tempFilePaths) {
							const {
								success,
								data
							} = await ossUpload(file.tempFilePaths[i], file.tempFiles[i].path, 'image/')
							// const {success,data} = await ossUpload(this.oss,file.tempFilePaths[0], file.tempFiles[0].path, 'image/')
							if (success) {
								console.log(data)
								this.image.push(data)
								// this.headImage = data
								console.log(this.image);
							} else {
								uni.showToast({
									icon: 'none',
									title: data
								})
							}
						}

					}
				})
				// this.uploadOss(1,(res=>{
				// 	console.log(res)
				// }))
			},
			delImg(index) {
				this.image.splice(index, 1);
			},


		}



	}
</script>

<style>
	.page {
		position: relative;
		width: 100%;
		height: 100vh;
		/* background: linear-gradient(#e3ecfb, #fdedf0, #fff, #fff); */
	}


	.top {
		position: fixed;
		top: 0rpx;
		width: 100%;
		/* background-color: #e3ecfb; */
		z-index: 999;
		text-align: center;
		vertical-align: middle;
		padding: 10rpx;
		justify-content: space-around;

	}

	.top-icon {
		position: absolute;
		left: 30rpx;
		z-index: 99;
		width: 30rpx;
		height: 30rpx;
	}

	.top-title {
		line-height: 50rpx;
		display: block;
		height: 50rpx;
		z-index: 99;
	}

	.top-right {
		position: absolute;
		right: 30rpx;
		width: 100rpx;
		height: 30rpx;
	}

	.line {
		margin-left: 20rpx;
		margin-top: 20rpx;
		width: calc(100% - 40rpx);
		height: 1rpx;
		background-color: lightgray;
	}
</style>